<template>
  <br />
  <div class="block text-center" m="t-4">
    <span class="demonstration"></span>
    <el-carousel class="banner" trigger="click" height="200px">
      <el-carousel-item v-for="item in imageList" :key="item">
        <div class="banner-image">
          <img :src="item.bannerAddress" />
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="index">
    <div class="book-item" v-for="item in novelListData" :key="item.id">
      <p></p>
      <NovelDisplayComponent :novel="item"></NovelDisplayComponent>
    </div>
  </div>
</template>

<script>
import NovelDisplayComponent from "@/components/NovelDisplayComponent.vue";
import { getIndexInfo, getBannerList } from "@/api";
export default {
  components: { NovelDisplayComponent },
  data() {
    return {
      novelListData: [],
      imageList: [],
    };
  },
  methods: {
    async getNovelListData() {
      const res = await getIndexInfo();
      console.log(res);

      if (res.data.success) {
        this.novelListData = res.data.result;
      } else {
        alert(res.data.message);
      }
    },
    async getBannerListInfo() {
      const res = await getBannerList();
      if (res.data.success) {
        this.imageList = res.data.result;
      } else {
        alert(res.data.message);
      }
    },
  },
  created() {
    this.getNovelListData();
    this.getBannerListInfo();
  },
};
</script>

<style>
.book-item {
  margin: 0 10;
  width: 600px;
}
.index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.demonstration {
  color: var(--el-text-color-secondary);
}
.banner {
}
.banner-image {
  display: flex;
  justify-content: center;
}
</style>